<!DOCTYPE html>
<html>
<head>
    <title>showdown.js</title>
    <script type="text/javascript" src="public/showdown/dist/showdown.min.js"></script>
    <link rel="stylesheet" href="css/katex.min.css">
    <link rel="stylesheet" type="text/css" href="github-markdown.css">
    <script src="public/katex/dist/showdown-katex.min.js"></script>
    <script src="public/highlight/highlight.min.js"></script>
	<script src="public/he/he.js"></script>
    <meta charset="utf-8"/>
</head>
<style>
    blockquote {
        border-left:#eee solid 5px;
        padding-left:20px;
    }
    ul li {
        line-height: 20px;
    }

    code {
        color:#D34B62;
        background: #F6F6F6;
        width:100%;
    }
</style>
<body>
<div>
     <div id="main"></div>

</div>

<script type="text/javascript">
const classAttr = 'class="'
function decodeHtml(text) {
    return (
      text
        .replace(/&amp;/g, '&')
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
      );
}
function showdownHighlight({ pre = false } = {}) {
  return [
    {
      type: "output"
      , filter(text, converter, options) {
        let left = "<pre><code\\b[^>]*>"
          , right = "</code></pre>"
          , flags = "g"
          , replacement = (wholeMatch, match, left, right) => {
            match = decodeHtml(match);
            let lang = (left.match(/class=\"([^ \"]+)/) || [])[1];
            document.getElementById("main").innerHTML =  lang
            if (left.includes(classAttr)) {
              let attrIndex = left.indexOf(classAttr) + classAttr.length;
              left = left.slice(0, attrIndex) + 'hljs ' + left.slice(attrIndex);
            } else {
              left = left.slice(0, -1) + ' class="hljs">';
            }

            if (pre && lang) {
              left = left.replace('<pre>', `<pre class="${lang} language-${lang}">`);
            }

            if (lang && hljs.getLanguage(lang)) {
              return left + hljs.highlight(match, { language: lang }).value + right;
            } else {
              return left + hljs.highlightAuto(match).value + right;
            }
          }
          ;

        return showdown.helper.replaceRecursiveRegExp(text, replacement, left, right, flags);
      }
    }
  ];
};
;

function convert(){
    var text = document.getElementById("oriContent").value;
    var converter = new showdown.Converter({
        extensions: [
          showdownKatex(),
          showdownHighlight({
            // Whether to add the classes to the <pre> tag
            pre: true
          }),
        ],
        simplifiedAutoLink: true,
        tasklists: true,
        tables: true,
        strikethrough: true,
        parseImgDimensions: true
    });
    var html = converter.makeHtml(text);
    document.getElementById("result").innerHTML = '<xmp>'+ html +'</xmp>';
}

function MarkText(text){
    var converter = new showdown.Converter({
        extensions: [
          showdownKatex(),
          showdownHighlight({
            // Whether to add the classes to the <pre> tag
            pre: true
          }),
        ],
        simplifiedAutoLink: true,
        tasklists: true,
        tables: true,
        strikethrough: true,
        parseImgDimensions: true
    });
    var html = converter.makeHtml(text);
    document.getElementById("main").innerHTML =  html ;
    return html;
}

</script>
</body>
</html>